<template lang="html">
  <div class="slide">
    <swiper :options="swiperOption" ref="mySwiper">
    <!-- slides -->
    <swiper-slide ><img data-src="../../../static/image/mono1.jpg" class="swiper-lazy" alt=""></swiper-slide>
    <swiper-slide ><img data-src="../../../static/image/mono2.jpg" class="swiper-lazy" alt=""></swiper-slide>
    <swiper-slide ><img data-src="../../../static/image/mono3.jpg" class="swiper-lazy" alt=""></swiper-slide>
    <swiper-slide ><img data-src="../../../static/image/mono4.jpg" class="swiper-lazy" alt=""></swiper-slide>
    <swiper-slide ><img data-src="../../../static/image/mono5.jpg" class="swiper-lazy" alt=""></swiper-slide>
    <swiper-slide ><img data-src="../../../static/image/mono6.jpg" class="swiper-lazy" alt=""></swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'slide',
  data() {
    return{
      swiperOption: {
      autoplay: 5000,//过渡延迟时间（单位ms），就是自动滑动时slide的停留时间
      grabCursor : true,//，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同）
      setWrapperSize :true,//开启这个设定会在Wrapper上添加等于slides相加的宽高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
      spaceBetween: 0,//swiper 间距
      paginationClickable: true,//点击分页器的指示点分页器会控制Swiper切换
      loop: true,//无限图片滚动效果
      speed:600,//图片滚动时间
      pagination : '.swiper-pagination',//导航绑定
      observeParents:true,//Swiper更新
      lazyLoading : true,//开启图片延迟加载
      lazyLoadingInPrevNext : true,//延迟加载应用到最接近的slide的图片（前一个和后一个slide）
      lazyLoadingInPrevNextAmount : 1
    }
  }
  },components: {

    swiperSlide

  },comput:{
      swiper() {
        this.$refs.mySwiper.swiper
      }
  }
}
</script>

<style lang="stylus">
.swiper-container {
    width: 100%;
}
.swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    -ms-transition-property: -ms-transform;
    transition-property: transform;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.swiper-slide {
    -webkit-flex-shrink: 0;
    -ms-flex: 0 0 auto;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;

    img{
      width: 100%;
    }
}
.swiper-pagination {
    position: absolute;
    text-align: center;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    z-index: 10;
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 10px;
    left: 0;
    width: 100%;
}
.swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 100%;
    background: #fff;
    opacity: .3;
    transition: all .35s ease-in;
}
.swiper-pagination-bullet-active {
    opacity: 9;
    transform:scale(1.5)
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
}



</style>
